import Layout from "../layout";
import { useRoutes, Outlet } from 'react-router-dom';
import Home from "../pages/home";
import About from "../pages/about";
import NotFount from "../pages/notFount";
import Storage from "../pages/storage";
import SplitPage from "../pages/split";
import FormExample from "../pages/formExample";
import Menu1 from '../pages/menu1'
import Menu2 from '../pages/menu2'
import LoginPage from "../pages/login";

const routes = [
    {
        path: '/login',
        element: <LoginPage />,
    },
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: '/',
                name: '首页',
                element: <Home />,
                meta: {
                    title: '首页',
                }
            },
            {
                path: '/menu',
                name: '多级菜单',
                element: <Outlet />,
                meta: {
                    title: '多级菜单',
                },
                children: [
                    {
                        path: '/menu/menu1',
                        name: '菜单1',
                        element: <Menu1 />,
                        meta: {
                            title: '菜单1',
                        },
                    },
                    {
                        path: '/menu/menu2',
                        name: '菜单1',
                        element: <Outlet />,
                        meta: {
                            title: '菜单2',
                        },
                        children: [
                            {
                                path: '/menu/menu2/menu2-1',
                                name: '菜单2-1',
                                element: <Menu2 />,
                                meta: {
                                    title: '菜单2-1',
                                },
                            }
                        ],
                    },
                ]
            },
            {
                path: '/about',
                name: '关于',
                element: <About />,
                meta: {
                    title: '关于',
                }
            },
            {
                path: '/storage',
                name: '监听Storage',
                element: <Storage />,
                meta: {
                    title: '监听Storage',
                }
            },
            {
                path: '/formExample',
                element: <FormExample />,
            },
        ]
    },
    {
        path: '/split',
        element: <SplitPage />,
    },
    {
        path: '*',
        element: <NotFount />
    },
];

const RenderRoute = () => useRoutes(routes);

export default RenderRoute
